<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>computed和watch</title>
</head>
<body>
<div id="root">
    <h2>原始msg值{{msg}}</h2>
    <h2>翻转后的msg值:{{msg.split("").reverse().join("")}}</h2>
    <h2>翻转后的msg值{{reverseMsg}}</h2>
    <h2>翻转后的msg值{{rMsg()}}</h2>
    <h2>翻转后的msg值{{reverseMsg}}</h2>
    <h2>翻转后的msg值{{rMsg()}}</h2>
    <h2>翻转后的msg值{{reverseMsg}}</h2>
    <h2>翻转后的msg值{{rMsg()}}</h2>

    <hr>
    <hr>

    <button @click="a++">a自增</button>
    <button @click="b++">b自增</button>
    <button @click="c++">c自增</button>
    <p>a的值{{a}}</p>
    <p>b的值{{b}}</p>
    <p>c的值{{c}}</p>
    <!--复杂逻辑-->
    <!--    <p>a+c的值:{{a+c}}</p>-->
    <!--    <p>c+b的值:{{c+b}}</p>-->
    <!--    计算属性方法-->
    <!--    <p>a+c的值:{{aAddC}}</p>-->
    <!--        <p>c+b的值:{{bAddC}}</p>-->
    <!--    普通函数-->
    <p>a+c的值:{{aAddC1()}}</p>
    <p>c+b的值:{{bAddC1()}}</p>
    <hr>
    <hr>
    <h2>{{fullName}}</h2>
    <button @click="fullName='高峰·道格拉斯'">修改</button>
    <button @click="fullName='libai'"></button>
    <h2>{{personChange}}</h2>
    <button @click="person.name='哈哈哈'">换人</button>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: "#root",
        data: {
            msg: "hello",
            a: 0,
            b: 0,
            c: 0,
            firstName: "阿猛",
            lastName: "哇哈哈",
            person: {
                name: "王向阳",
                age: 40,
                sex: "不知",
            },
        },
        methods: {
            rMsg() {
                // console.log("methods")
                // this.a++;
                return this.msg.split("").reverse().join("");
            },
            aAddC1: function () {
                console.log("a+c");
                return this.a + this.c;
            },
            bAddC1: function () {
                console.log("b+c");
                return this.b + this.c;
            }
        },

        computed: {
            //
            reverseMsg: function () {
                console.log("conputed")

                return this.msg.split("").reverse().join("");
            },
            aAddC: function () {
                console.log("computed:a+c");
                return this.a + this.c;
            },
            bAddC: function () {
                console.log("computed:b+c");
                return this.b + this.c;
            },
            fullName: {
                //    get
                get: function () {
                    console.log("funllName的get方法")
                    return this.firstName + "·" + this.lastName;
                },
                //    setter
                set(newName) {
                    console.log("fullName的set方法");
                    let names = newName.split("·");
                    this.firstName = names[0];
                    console.log(names);
                    this.lastName = names[names.length - 1];
                }

            },
            personChange: {
                get() {
                    return this.person.name + this.person.age + this.person.sex;
                }
            }
        }
        ,
        watch:{
            firstName:(newV,odlV)=>{
                console.log(newV,odlV,"firstName被改变了")
            },
            lastName:{
                handler(newV,odlV){
                    console.log(newV,odlV,"lastName被改变了")
                },
                immediate:true,

            },
            person:{
                handler(newV, odlV) {
                    console.log(newV,odlV,'对象的监听')
                },
                deep:true,
            },
            "person.name":{
                handler(newV,oldV){
                    console.log(newV,oldV)
                }
            }
        }

    })
</script>